<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ page language="java" pageEncoding="utf-8" contentType="text/html;charset=utf-8" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<%@ include file="../common/common.jsp" %>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>添加/编辑文章 - ${title }</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/js/uploadify/uploadify.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/ueditor/themes/default/css/ueditor.css">
</head>
<body
        <%@ include file="../common/skin.jsp" %>
>
<%@ include file="../common/head.jsp" %>
<%@ include file="../common/menu.jsp" %>
<div class="J_content">
    <div class="mt20 plr20">
        <div class="J_filter">
            <table class="not_hightlight" style="width: 100%;">
                <tbody>
                <tr>
                    <td class="t_right">
                        <div class="fl">
                            <c:choose>
                                <c:when test="${article != null }">
                                    <a class="current" href="javascript:;">编辑文章</a>
                                </c:when>
                                <c:otherwise>
                                    <a class="current" href="javascript:;">添加文章</a>
                                </c:otherwise>
                            </c:choose>
                        </div>

                        <div class="fr">
                            <a href="javascript:myBack()">
                                <i class="icon"></i><span>返回上一页</span>
                            </a>
                        </div>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
        <div class="J_formTable l_form_table mgt40">
            <form action="${ctx}/cms/article/ajax/save" id="editForm" method="post">
                <input type="hidden" name="id" value="${article.id }"/>
                <input type="hidden" name="coverImageUrl" id="coverImageUrl" value="${article.coverImageUrl }"/>
                <table>
                    <tr>
                        <td class="l_title w200">一级栏目：<font color="red">*</font></td>
                        <td>
                            <div class="J_toolsBar fl">
                                <div class="t_opacitySelect ml10">
                                    <span>请选择</span>
                                    <select id="rootColumnId" name="rootColumnId" onChange="selectLeafColumn()"
                                            style="min-width:200px">
                                        <option value="">请选择</option>
                                        <c:forEach items="${rootCoulumnInfoList }" var="c">
                                            <option value="${c.id }"
                                                    <c:if test="${c.id == rootColumnId }">selected="selected"</c:if>
                                            >${c.name }</option>
                                        </c:forEach>
                                    </select>
                                </div>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td class="l_title w200">二级栏目：<font color="red">*</font></td>
                        <td>
                            <div class="J_toolsBar fl">
                                <div class="t_opacitySelect ml10">
                                    <span>请选择</span>
                                    <select id="leafColumnId" name="leafColumnId" style="min-width:200px">

                                    </select>
                                </div>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td class="l_title w200">新闻标题、人物姓名、活动名称：</td>
                        <td>
                            <div class="J_toolsBar fl">
                                <div class="t_text w600 ml10">
                                    <label>
                                        <input type="text" name="title" value="${article.title }">
                                    </label>
                                </div>
                            </div>
                        </td>
                    </tr>


                    <tr>
                        <td class="l_title w200">导读、人物头衔：</td>
                        <td>
                            <div class="J_toolsBar fl">
                                <div class="t_text w600 ml10">
                                    <label>
                                        <input type="text" name="guidRead" value="${article.guidRead }">
                                    </label>
                                </div>
                            </div>
                        </td>
                    </tr>

                    <tr>
                        <td class="l_title w200">展会所在省份：</td>
                        <td>
                            <div class="t_opacitySelect ml10">
                                <select id="adcode" name="adcode" style="min-width:200px">
                                    <option value="">请选择</option>
                                    <c:forEach items="${areaList }" var="c">
                                        <option value="${c.adcode }"
                                                <c:if test="${c.adcode == article.adcode }">selected="selected"</c:if>
                                        >${c.name }</option>
                                    </c:forEach>
                                </select>
                            </div>
                        </td>
                    </tr>

                    <tr>
                        <td class="l_title w200">展会详细地址：</td>
                        <td>
                            <div class="J_toolsBar fl">
                                <div class="t_text w600 ml10">
                                    <label>
                                        <input type="text" name="activityDetail" value="${article.activityDetail }">
                                    </label>
                                </div>
                            </div>
                        </td>
                    </tr>

                    <tr>
                        <td class="l_title w200">展会举办单位：</td>
                        <td>
                            <div class="J_toolsBar fl">
                                <div class="t_text w600 ml10">
                                    <label>
                                        <input type="text" name="organizers" value="${article.organizers }">
                                    </label>
                                </div>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td class="l_title w200">展会举办时间：</td>
                        <td>
                            <div class="t_text ml10">
                                <input type="text" id="holdingTime" name="holdingTime"
                                       onclick="WdatePicker({dateFmt:'yyyy-MM-dd HH:ss:mm'})" value="${article.holdingTime }"
                                       autocomplete="off">
                            </div>

                        </td>
                    </tr>

                    <tr>
                        <td class="l_title w200">新闻、人物、展会图片：<a href="${ctx }/cms/article/flashView" target="_blank"><font
                                color="red">无法上传？</font></a></td>
                        <td>
                            <div class="J_toolsBar fl">
                                <div class=" w200 ml10">
                                    <label>
                                        <input type="file" id="attachImage"/>
                                    </label>
                                </div>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td class="l_title"></td>
                        <td>
                            <div class="J_toolsBar fl">
                                <div class="t_img w100 ml10">
                                    <c:choose>
                                        <c:when test="${article.coverImageUrl != null && article.coverImageUrl != ''}">
                                            <img src="${ctx }${article.coverImageUrl}" id="attachURL" width="100px"
                                                 height="100px"/>
                                        </c:when>
                                        <c:otherwise>
                                            <img src="${ctx }/static/images/J_null.png" id="attachURL" width="100px"
                                                 height="100px"/>
                                        </c:otherwise>
                                    </c:choose>
                                </div>
                            </div>
                        </td>
                    </tr>

                    <tr id="orderNoTr">
                        <td class="l_title w200">排序：</td>
                        <td>
                            <div class="J_toolsBar fl">
                                <div class="t_text w200 ml10">
                                    <label>
                                        <input type="number" name="orderNo" value="${article.orderNo }">
                                    </label>
                                </div>
                            </div>
                        </td>
                    </tr>
                    <tr id="contentTr">
                        <td class="l_title w200">内容：</td>
                        <td>
                            <div class="J_toolsBar" style="width: 90%">
                                <script type="text/plain" id="editor" name="content">${article.content}</script>
                            </div>
                        </td>
                    </tr>

                    <tr>
                        <td class="l_title w200">发布人：</td>
                        <td>
                            <div class="J_toolsBar fl">
                                <div class="t_text w200 ml10">
                                    <label>
                                        <input type="text" name="publisher" value="${article.publisher }">
                                    </label>
                                </div>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <div class="J_toolsBar mgt40">
                                <div class="t_buttonGroup">
                                    <a class="abtn red" href="javascript:mySubmit();">
                                        <i class="icon"></i>保存
                                    </a>
                                    <a class="abtn gray" href="javascript:myBack();">
                                        <i class="icon"></i>返回
                                    </a>
                                </div>
                            </div>
                        </td>
                    </tr>
                </table>

            </form>
        </div>
    </div>
</div>

<script type="text/javascript" charset="utf-8"
        src="${pageContext.request.contextPath}/ueditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="${pageContext.request.contextPath}/ueditor/ueditor.all.js"></script>
<script type="text/javascript" charset="utf-8"
        src="${pageContext.request.contextPath}/ueditor/lang/zh-cn/zh-cn.js"></script>

<script src="${pageContext.request.contextPath}/static/js/uploadify/jquery.uploadify.js"></script>

<script type="text/javascript">
    //表单验证
    $(function () {
        $('#editForm').validator({
            fields: {
                rootColumnId: '一级栏目:required',
                leafColumnId: '二级栏目:required',
                title: '标题:required'
            },
            valid: function (form) {
                $('#editForm').ajaxSubmit({
                    success: function (result) {
                        if (result.success) {
                            layer.alert('保存成功');
                            window.location.href = "${ctx}/cms/article/list"
                        }
                    }
                });
            }
        });
    });

    function myBack() {
        window.location.href = "${ctx}/cms/article/list";
    }

    function mySubmit() {
        $('#editForm').submit();
    }


    function selectLeafColumn() {
        var articleId = '${article.id}';
        var columnId = '${columnId}'


        var rootColumnInfoId = $("#rootColumnId").val();
        $.ajax({
            url: '${ctx}/cms/column/ajax/getLeafColumn',
            type: 'get',
            data: {
                'rootColumnInfoId': rootColumnInfoId
            },
            traditional: true,
            success: function (obj) {
                var resultMsg = '<option value="">请选择</option>';
                $("#leafColumnId").html("");

                $("#leafColumnId").append(resultMsg);
                var data = obj.data;
                var dataLength = data.length;
                //加载数据
                for (var i = 0; i < dataLength; i++) {
                    var option = $("<option></option>");
                    option.text(data[i].name);
                    option.val(data[i].id);
                    if (data[i].id == columnId) {
                        option.attr("selected", true);
                    }
                    $("#leafColumnId").append(option);
                }
                $("#leafColumnId").trigger("change")

            }
        });
    }

    //描述
    var editor = UE.getEditor('editor', {
        serverUrl: '${ctx}/ueditor/config',
        enableAutoSave: false,
        saveInterval: 0,
        toolbars: [
            ['anchor', //锚点
                'undo', //撤销
                'redo', //重做
                'bold', //加粗
                'indent', //首行缩进
                'snapscreen', //截图
                'italic', //斜体
                'underline', //下划线
                'strikethrough', //删除线
                'subscript', //下标
                'fontborder', //字符边框
                'superscript', //上标
                'formatmatch', //格式刷
                'source', //源代码
                'blockquote', //引用
                'pasteplain', //纯文本粘贴模式
                'selectall', //全选
                'print', //打印
                'preview', //预览
                'horizontal', //分隔线
                'removeformat', //清除格式
                'time', //时间
                'date', //日期
                'unlink', //取消链接
                'insertrow', //前插入行
                'insertcol', //前插入列
                'mergeright', //右合并单元格
                'mergedown', //下合并单元格
                'deleterow', //删除行
                'deletecol', //删除列
                'splittorows', //拆分成行
                'splittocols', //拆分成列
                'splittocells', //完全拆分单元格
                'deletecaption', //删除表格标题
                'inserttitle', //插入标题
                'mergecells', //合并多个单元格
                'deletetable', //删除表格
                'cleardoc', //清空文档
                'insertparagraphbeforetable', //"表格前插入行"
                'insertcode', //代码语言
                'fontfamily', //字体
                'fontsize', //字号
                'paragraph', //段落格式
                'simpleupload', //单图上传
                'insertimage', //多图上传
                'edittable', //表格属性
                'edittd', //单元格属性
                'link', //超链接
                'emotion', //表情
                'spechars', //特殊字符
                'searchreplace', //查询替换
                'map', //Baidu地图
                'gmap', //Google地图
                'insertvideo', //视频
                'help', //帮助
                'justifyleft', //居左对齐
                'justifyright', //居右对齐
                'justifycenter', //居中对齐
                'justifyjustify', //两端对齐
                'forecolor', //字体颜色
                'backcolor', //背景色
                'insertorderedlist', //有序列表
                'insertunorderedlist', //无序列表
                'fullscreen', //全屏
                'directionalityltr', //从左向右输入
                'directionalityrtl', //从右向左输入
                'rowspacingtop', //段前距
                'rowspacingbottom', //段后距
                'pagebreak', //分页
                'insertframe', //插入Iframe
                'imagenone', //默认
                'imageleft', //左浮动
                'imageright', //右浮动
                'attachment', //附件
                'imagecenter', //居中
                'wordimage', //图片转存
                'lineheight', //行间距
                'edittip ', //编辑提示
                'customstyle', //自定义标题
                'autotypeset', //自动排版
                'webapp', //百度应用
                'touppercase', //字母大写
                'tolowercase', //字母小写
                'background', //背景
                'template', //模板
                'scrawl', //涂鸦
                'music', //音乐
                'inserttable', //插入表格
                'drafts', // 从草稿箱加载
                'charts', // 图表
            ]
        ],
    });

    editor.ready(function () {
        editor.setHeight(500);
        editor.setContent(productInfo.seoDescription);
    });
    $(function () {

        $("#rootColumnId").trigger("change")
        var articleType = '${article.type}';
        if (articleType == 1) {
            $('#contentTr').hide();
            $("#orderNoTr").hide();
            $("#hrefTr").show();
        } else if (articleType == 2) {
            $('#contentTr').hide();
            $("#orderNoTr").show();
            $("#hrefTr").show();
        }
    })

    $("#attachImage").uploadify(
        {
            'swf': '${pageContext.request.contextPath}/static/js/uploadify/uploadify.swf',
            'uploader': '${pageContext.request.contextPath}/upload/uploadAttach',
            'cancelImg': '${pageContext.request.contextPath}/static/js/uploadify/uploadify-cancel.png',
            'queueID': 'fileQueue',
            'auto': true,
            'multi': false,
            'simUploadLimit': 1,
            'buttonText': '上传图片',
            'fileObjName': 'fileData',
            'width': 70,
            'height': 20,
            'uploadLimit': 3,
            'onUploadSuccess': function (file, data, response) {
                if (data != null) {
                    var attachUrl = '${pageContext.request.contextPath}' + data;
                    $("#attachURL").attr('src', attachUrl);
                    $("#coverImageUrl").val(data);
                }
            }
        });

    $('input[name="articleType"]').on('click', function () {
        var val = $('input[name="articleType"]:checked').val();
        if (val == 'contentType') {
            $('#contentTr').show();
            $("#hrefTr").hide();
            $("#orderNoTr").hide();
        } else if (val == 'hrefType') {
            $('#contentTr').hide();
            $("#orderNoTr").hide();
            $("#hrefTr").show();
        } else if (val == 'adType') {
            $('#contentTr').hide();
            $("#orderNoTr").show();
            $("#hrefTr").show();
        }
    });
</script>

</body>
</html>